<template>
    <div id="app">
        <heads class="top" v-if="$route.meta.navbarShow"></heads>
        <transition name="fade" mode="out-in">
            <router-view />
        </transition>
    </div>
</template>

<script>
import { mapState } from "Vuex";
import heads from "./components/head";
export default {
    name: "App",
    data() {
        return {
            keeps: true
        };
    },
    computed: {
        ...mapState(["user", "modules", "saveType"])
    },
    created() {
        console.log(this.saveType, 999);
        if (this.saveType == null) {
            this.$store.commit("saveType", 1);
        }
    },
    components: {
        heads
    },
    watch: {
        saveType() {
            this.$router.push({path:'/personal'})
            this.$router.go(0)
        },
        user() {
            this.module();
        }
    },
    methods: {
        module() {
            this.$api.post(this.$url.module, "", res => {
                if (res.data.code == 200) {
                    this.$store.commit(
                        "getModule",
                        JSON.stringify(res.data.data)
                    );
                }
            });
        }
    }
};
</script>

<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333;
    padding-top: 140px;
}
body,
html {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pan {
    text-align: center;
    margin-top: 10vh;
    font-size: 30px;
}
.top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #eee;
    z-index: 5000;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.25s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>
